import camera from '@/assets/icons/svg/camera.svg';
import { fittingString } from "@/utils";

export default G6 => {
  const nodeWidth = 243;
  const nodeHeight = 64;
  const padding = 7;
  const spacing = 80;
  G6.registerNode('card-node', {

    draw(cfg, group) {
      const container = this.createNodeBox(group, nodeWidth, nodeHeight);

      this.drawName(cfg, group);
      this.drawIcon(cfg, group);
      this.drawDescription(cfg, group);

      return container;
    },
    createNodeBox(group, w, h) {

      /* 最外面的大矩形 */
      const container = group.addShape('rect', {
        name: 'big-rect-shape',
        attrs: { x: 0, y: 0, width: w, height: h },
      });

      /* 矩形 */
      group.addShape('rect', {
        name: 'rect-shape',
        attrs: { x: 3, y: 0, width: w - 19, height: h, fill: '#C6E5FF', stroke: '#5B8FF9', radius: 2, cursor: 'pointer' },
      });

      /* 左边的粗线 */
      group.addShape('rect', {
        name: 'left-border-shape',
        attrs: { x: 3, y: 0, width: 3, height: h, fill: '#5B8FF9', radius: 1.5 },
      });

      /* 分割线 */
      group.addShape('rect', {
        name: 'left-border-right-shape',
        attrs: { x: spacing, y: 10, width: .5, height: h - 20, fill: '#5B8FF9' },
      });


      return container;
    },
    drawName(cfg, group) {
      const g = group.addGroup({ name: "top-group" });
      g.addShape("rect", {
        attrs: {
          fill: "#DBEAFE",
          stroke: "#c7d0d1",
          x: spacing + 10 - padding + 1,
          y: 5,
          width: nodeWidth - spacing - 10 - (padding * 2),
          height: 0.5 * nodeHeight - padding,
          lineWidth: 1.5,
          radius: 4
        }
      });

      g.addShape('text', {
        name: 'name-text-shape',
        attrs: {
          text: cfg.name,
          x: spacing + 10,
          y: 19,
          fontSize: 14,
          fontWeight: 700,
          textAlign: 'left',
          textBaseline: 'middle',
          fill: '#60A5FA',
          cursor: 'pointer',
        },
      });
    },
    drawIcon(cfg, group) {
      group.addShape('image', {
        name: 'svg-icon-shape',
        attrs: {
          img: 'https://img-blog.csdnimg.cn/img_convert/162168c117d47c0937f146a637cc2998.png',
          x: (spacing - 45) / 2 + 3,
          y: 10,
          width: 45,
          height: 45,
          cursor: 'pointer',
        },
      });
    },
    drawDescription(cfg, group) {
      const description = group.addShape('text', {
        name: 'bottom-text-description-shape',
        attrs: {
          text: fittingString(cfg.label, (nodeWidth - spacing - 10) - padding * 2, 14),
          label: cfg.label,
          x: spacing + 10,
          y: 45,
          fontSize: 12,
          textAlign: "left",
          textBaseline: "middle",
          shadowColor: '#ff7900',
          fill: '#5B8FF9',
          cursor: 'pointer',
        },
      });

      description.on('mouseenter', () => {
        this.setState("top-group-active", true, group);
      });
      description.on('mouseleave', () => {
        this.setState("top-group-active", false, group);
      });
    },
    setState(name, value, group) {

      if (name === "top-group-active") {

        const text = group.find((e) => e.get("name") === "bottom-text-description-shape");
        const txt = text.attr("label");

        const cutStr = fittingString(txt, (nodeWidth - spacing - 10) - padding * 2, 14);  // bbox - 80 - 10 - (padding * 2)

        if (cutStr === txt) {
          text.attr({
            fontWeight: value ? 800 : 700,
            shadowBlur: value ? 12.2 : 0,
            text: value ? txt : cutStr,
          });
        } else {
          text.attr({
            fontWeight: value ? 800 : 700,
            shadowBlur: value ? 12.2 : 0,
            textAlign: "left",
            text: value ? txt : cutStr,
            fill: value ? "#2563EB" : '#fff',
          });
        }
      }

    }

  });

}